<template>
  <view>
    <view class="containers">
      <u-row gutter="10">
        <u-col span="3">
          <u--image
            :showLoading="true"
            :src="imgurl"
            width="80px"
            height="60px"
            radius="6"
          ></u--image>
        </u-col>
        <u-col span="9">
          <u--text :text="partnerName" bold :lines="1"></u--text>
          <u--text :text="detailedAddress" :lines="2" type="info"></u--text>
        </u-col>
      </u-row>
    </view>
    <view class="container">
      <u-cell-group :border="false">
        <u-cell title="联系人" :value="contact"></u-cell>
        <u-cell title="手机" :value="contactPhone"></u-cell>
        <u-cell title="电话" :value="officeTelphone"></u-cell>
        <u-cell title="直达" :value="routeName"></u-cell>
        <u-cell title="覆盖" :value="purposeName" :border="false"></u-cell>
      </u-cell-group>
      <view class="map">
        <map
          id="map_container"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
          enable-3D="false"
          show-compass="false"
          enable-overlooking="false"
          :enable-satellite="false"
          :enable-traffic="false"
          show-location="false"
          scale="12"
        />
      </view>
      <view class="dianhua">
        <text @click="bohao()">电话联系</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contact: "",
      contactPhone: "",
      detailedAddress: "",
      officeTelphone: "",
      partnerName: "",
      purposeName: "",
      routeName: "",
      imgurl: "",
      contactPhone: "",
      amapPlugin: null,
      latitude: 39.899,
      longitude: 116.39742,
      key: "e9f1231c3e04f846432856dafa4e0a97",
      markers: [
        {
          id: 1, // Number
          title: "1", // String-标注点名
          latitude: 39.899,
          longitude: 116.39742,
          width: 30,
          height: 30,
          iconPath: "../../static/iocn55.png", // 显示的图标
          callout: {
            //自定义标记点上方的气泡窗口 点击有效
            content: "", //文本
            color: "#ffffff", //文字颜色
            fontSize: 14, //文本大小
            borderRadius: 6, //边框圆角
            borderWidth: "0",
            bgColor: "#EF4D3D", //背景颜色
            display: "ALWAYS", //常显
            padding: 5,
          },
        },
      ],
    };
  },
  onLoad(options) {
    console.log(options);
    this.contact = options.contact;
    this.contactPhone = options.contactPhone;
    this.detailedAddress = options.detailedAddress;
    if (options.officeTelphone === "null") {
      this.officeTelphone = "空";
    } else {
      this.officeTelphone = options.officeTelphone;
    }
    this.partnerName = options.partnerName;
    this.purposeName = options.purposeName;
    this.routeName = options.routeName;
    this.imgurl = options.imgurl;
    this.contactPhone = options.contactPhone;
    this.getplace();
  },
  methods: {
    // 拨打电话
    bohao() {
      let phone = this.contactPhone;
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {},
        fail: (res) => {
          console.log("打电话失败了");
        },
      });
    },
    getplace() {
      //腾讯地图 详细地址 获取坐标经纬度
      //key需要去腾讯地图官方控制台获取
      uni.request({
        url: `https://apis.map.qq.com/ws/geocoder/v1/?address=${this.detailedAddress}&key=LDXBZ-TTGRI-6CJGB-UNANB-J3CB7-G3FST`,
        success: (res) => {
          console.log("地理编码", res);
          this.markers[0].latitude = res.data.result.location.lat;
          this.markers[0].longitude = res.data.result.location.lng;
          this.markers[0].callout.content = this.detailedAddress;
          this.latitude = res.data.result.location.lat;
          this.longitude = res.data.result.location.lng;
        },
        fail(err) {
          console.log(err);
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 0 15upx;
}
.map {
  position: fixed;
  top: 680upx;
  bottom: 20upx;
  left: 10upx;
  right: 0;
  z-index: -1;
}

#map_container {
  width: 98%;
  height: 83%;
}

.container {
  border-radius: 17upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5,
    1.75upx 1.75upx 7.01upx 0px #e5e5e5;
  margin-top: 20upx;
  padding: 10px;
  .dianhua {
    width: 680upx;
    height: 101upx;
    background-color: #ef4d3d;
    font-size: 30upx;
    color: #fff;
    text-align: center;
    line-height: 101upx;
    border-radius: 10upx;
    margin: 10upx;
    position: fixed;
    bottom: 30upx;
    text {
      padding: 20upx 270upx;
    }
  }
}
.containers {
  border-radius: 17upx;
  background: #ffffff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5,
    1.75upx 1.75upx 7.01upx 0px #e5e5e5;
  margin-top: 20upx;
  padding: 10px;
}
</style>
